<%- include('./layouts/admin_head.ejs') %>
<div class="main">
  <%- include('./layouts/admin_nav.ejs'); %>
  <div class="container-fluid">
    <div class="page-title">
      <h1>分类目录</h1>
    </div>
    <!-- 有错误信息时展示 -->
    <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
    <div class="row">
      <div class="col-md-4">
        <form>
          <h2>添加新分类目录</h2>
          <div class="form-group">
            <label for="name">名称</label>
            <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
          </div>
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="slug">图标</label>
            <input id="classname" name="classname" type="hidden" value="fa-glass">
            <div class="icons">
              <span class="fa fa-glass"></span>
              <div class="icons-contain">
                <i class="closeBut fa fa-times"></i>
                <div class="handle">请选择一个图标</div>
                <div class="icons-outer">
                  <div class="icons-inner"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <input type="button" class="btn btn-primary" value="添加" id="btn-add">
          </div>
        </form>
      </div>
      <div class="col-md-8">
        <div class="page-action">
          <!-- show when multiple checked -->
          <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        </div>
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th class="text-center" width="40"><input type="checkbox"></th>
              <th>名称</th>
              <th>Slug</th>
              <th>图标</th>
              <th>是否在导航显示</th>
              <th class="text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-center"><input type="checkbox"></td>
              <td>未分类</td>
              <td>uncategorized</td>
              <td>uncategorized</td>
              <td>uncategorized</td>
              <td class="text-center">
                <a href="javascript:;" class="btn btn-info btn-sm">编辑</a>
                <a href="javascript:;" class="btn btn-danger btn-sm">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="alert" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">提示</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
      <div class="modal-body">
        <div id="tip-text" class="container-fluid">
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">你正在执行危险操作</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
      <div class="modal-body">
        <div class="container-fluid">
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>


<%- include('./layouts/admin_aside.ejs'); %>
<%- include('./layouts/admin_footer.ejs'); %>
<script src="/assets/js/admin_category.js"></script>
<script type="text/template" id="tp">
  {{each $data $val}}
  <tr data-id="{{$val.id}}">
    <td class="text-center"><input type="checkbox"></td>
    <td>{{$val.name}}</td>
    <td>{{$val.slug}}</td>
    <td><i class="fa {{$val.classname}}"></i></td>
    <td>
      {{ if ($val.isShow == 1) }}
        <a href="javascript:;" class="btn btn-warning btn-sm">隐藏</a>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-success">当前在网站导航中显示</span>
      {{else}}
        <a href="javascript:;" class="btn btn-success btn-sm">显示</a>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-warning">当前没有在网站导航中显示</span>
      {{/if}}
    </td>
    <td class="text-center">
      <a href="javascript:;" class="btn btn-info btn-sm">编辑</a>
      <a href="javascript:;" class="btn btn-danger btn-sm">删除</a>
    </td>
  </tr>
  {{/each}}
</script>